<template>
  <div class="find">
    <search-header :type="type"></search-header>
    <swiper :imgList="imgList" @jump="listsjump"></swiper>
    <icon-list :list="iconList" @jump="iconsjump"></icon-list>
    <find-list :list="findList" @jump="listsjump"></find-list>
  </div>
</template>

<script>
  import searchHeader from '@/components/header/searchHeader'
  import Swiper from '@/components/swiper/Swiper'
  import findList from '../../../components/list/findlist'
  import iconList from '../../../components/icon/icons'
  import axios from 'axios'

  export default {
    name: "find",
    data() {
      return {
        imgList: [],
        findList: [],
        type: 'apply',
        "iconList": [
          {"id": "01", "imgUrl": require("../../../assets/images/find/icon1.png"), "desc": "赛事报名"},
          {"id": "02", "imgUrl": require("../../../assets/images/find/iconb.png"), "desc": "健身培训"},
          {"id": "03", "imgUrl": require("../../../assets/images/find/iconc.png"), "desc": "热门资讯"},
          {"id": "04", "imgUrl": require("../../../assets/images/find/icon4.png"), "desc": "视频"},
        ]
      }
    },
    components: {
      iconList,
      findList,
      searchHeader,
      Swiper
    },
    mounted() {
      this.getswiperInfo('/api/sportslist/banner');
      this.getlistInfo('/api/sportslist');
    },
    methods: {
      // icon跳转
      iconsjump(b) {
        if (b === '01') {
          this.$router.push('/find');
        }
        else if (b === '02') {
          this.$router.push('/train');
        }
        else if (b === '03') {
          this.$router.push('/new');
        }
        else if (b === '04') {
          this.$router.push('/video');
        }
      },
      // list跳转
      listsjump(id, title) {
        this.$router.push({"name": "findDetail", params: {id: id, title: title}})
      },
      // 数据加载
      getswiperInfo(url) {
        let that = this
        axios.get(url).then(function (res) {
          if (res.data) {
            that.imgList = res.data.data
          }
        })
      },
      getlistInfo(url) {
        let that = this
        axios.get(url).then(function (res) {
          if (res.data) {
            that.findList = res.data.data
          }
        })
      }
    },
  }
</script>


